import 'package:boss/color_constant.dart';
import 'package:hi_common/hi_common.dart';
import 'package:flutter/material.dart';

class ChipData<T> {
  String title;
  T value;

  ChipData({this.title, this.value});
}

enum ChipSelectedAction {
  fill,
  border,
}

class ChipGroup<T> extends StatefulWidget {
  final List<ChipData<T>> items;
  final T value;
  final ValueChanged<T> onChanged;
  final double spacing;
  final double runSpacing;
  final ChipSelectedAction selectedAction;
  final bool isAverage;
  final bool enabled;

  const ChipGroup({
    Key key,
    @required this.items,
    this.value,
    this.onChanged,
    this.spacing,
    this.runSpacing,
    this.selectedAction = ChipSelectedAction.border,
    this.isAverage = false,
    this.enabled = true,
  }) : super(key: key);

  @override
  _ChipGroupState<T> createState() => _ChipGroupState<T>();
}

class _ChipGroupState<T> extends State<ChipGroup<T>> {
  @override
  Widget build(BuildContext context) {
    final spacing = widget.spacing ?? 20.w;
    final runSpacing = widget.runSpacing ?? 20.w;

    return LayoutBuilder(
      builder: (context, viewport) {
        final avgWidth = (viewport.maxWidth - (spacing * (widget.items.length))) / widget.items.length;

        return Wrap(
          spacing: spacing,
          runSpacing: runSpacing,
          children: widget.items
              .map((item) => Chip(
                    data: item,
                    onTap: () {
                      if (widget.onChanged != null) {
                        widget.onChanged(item.value);
                      }
                    },
                    isSelected: item.value == widget.value,
                    selectedAction: widget.selectedAction,
                    avgWidth: avgWidth,
                    isAverage: widget.isAverage,
              enabled: widget.enabled,
                  ))
              .toList(),
        );
      },
    );
  }
}

class Chip<T> extends StatelessWidget {
  final ChipData<T> data;
  final bool isSelected;
  final VoidCallback onTap;
  final ChipSelectedAction selectedAction;
  final bool isAverage;
  final double avgWidth;
  final bool enabled;

  const Chip({
    Key key,
    @required this.data,
    this.onTap,
    this.isSelected = false,
    this.selectedAction = ChipSelectedAction.border,
    this.isAverage = false,
    this.avgWidth,
    this.enabled = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color textColor;
    Color borderColor;
    Color bgColor;

    if (selectedAction == ChipSelectedAction.fill) {
      final selectedColor = Theme.of(context).primaryColor;

      textColor = isSelected ? selectedColor : ColorConstant.ff33;
      borderColor = isSelected ? selectedColor : ColorConstant.ff33;
      bgColor = Colors.white;
    } else if (selectedAction == ChipSelectedAction.border) {
      final selectedColor = Theme.of(context).primaryColor;

      textColor = isSelected ? selectedColor : ColorConstant.ff33;
      borderColor = isSelected ? selectedColor.withOpacity(0.1) : ColorConstant.ff33;
      bgColor = isSelected ? selectedColor.withOpacity(0.1) : Colors.white;
    }

    if (!enabled) {
      borderColor = ColorConstant.e6e6;
      textColor = ColorConstant.ffcc;
      bgColor = Colors.white;
    }

    return GestureDetector(
      onTap: enabled ? onTap : null,
      behavior: HitTestBehavior.translucent,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            constraints: BoxConstraints(
              minWidth: isAverage ? avgWidth : 150.w,
              maxWidth: isAverage ? avgWidth : double.infinity,
            ),
            padding: EdgeInsets.symmetric(horizontal: 10.w),
            height: 58.w,
            decoration: BoxDecoration(
              color: bgColor,
              borderRadius: BorderRadius.circular(58.w),
              border: Border.all(color: borderColor, width: 1.px * 2),
            ),
            alignment: Alignment.center,
            child: Text(
              data.title,
              style: TextStyle(fontSize: 28.sp, color: textColor),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          )
        ],
      ),
    );
  }
}
